import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Tools, Modal } from "weaver-mobile";
import { withRouter, Route } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import VerifyForm from "./VerifyForm";
import Setting from "./Setting";

import '../../style/secretGuard.less';

const getLabel = Tools.getLabel;

@inject('secretGuardStore')
@withRouter
@observer
export default class SecretGuard extends Component {
    componentDidMount() {
        const { history, secretGuardStore: { setHistory, isSettedQuestion, setPageStatus }, inTab } = this.props;
        setHistory(history);
        isSettedQuestion();
        setPageStatus(inTab);
        document.title = getLabel("81604", "密保设置");
    }
    render() {
        const { secretGuardStore: { desc, outterBtns, isSetted, secStatus, visible, handleModalClose, onWrapTouchStart, verify, layout, pslayout },inTab } = this.props;
        
        const lyt = inTab ? pslayout : layout;

        return (
            <div className={`secretGuard${inTab ? " inTab" : ""}`}>
				<img src="/hrm/hrm_e9/image/computer.png" alt=""/>
				{ isSetted && <div className="secSetted"><span>{getLabel('386526',"密保状态")}</span>: <span>{secStatus ? getLabel('387099','已启用')  : getLabel('387100','已停用')}</span></div>}
				<div className="desc">{desc}</div>
				<div className="outterBtns">{outterBtns}</div>
				<Route
		          key={lyt.id}
		          path={lyt.path}
		          render={() => (
		            <RouteLayout>
		              <div
		                key="wmPoutePageDemo"
		                className="wm-route-layout wm-demo-route-layout-page"
		              >
		                <Setting store={this.props.secretGuardStore}/>
		              </div>
		            </RouteLayout>
		          )}
		        />
				<Modal
		          visible={visible}
		          transparent
		          maskClosable={false}
		          onClose={handleModalClose}
		          title={getLabel(15357,"验证")}
		          footer={[{text: getLabel(201, '取消'), onPress:handleModalClose}, {text: getLabel(826, '确定'),onPress: verify}]}
		          wrapProps={{ onTouchStart: onWrapTouchStart }}
		        >
		        	<VerifyForm store={this.props.secretGuardStore}/>
		        </Modal>
			</div>
        );
    }
}